@use "sass:map";

@use "./theme/light" as l;
@use "./theme/dark" as d;

$themes: (
  light: l.$main,
   dark: d.$main
);

$font: (
  old: (
          primiry_size: 6,
          one_lv_size: 5,
          two_lv_size: 4,
          other_lv_size: 3,
  ),
  new: (
          primiry_size: 5,
          one_lv_size: 4,
          two_lv_size: 3,
          other_lv_size: 2,
  )
);

$themeColor: #f66f0e;

$curThemeName: light;
$curFontName: old;

@mixin useTheme() {
  @each $key,$val in $themes {
    $curThemeName : $key !global;
    html[data-theme='#{$key}'] & {
      transition: all 0.3s;
      @content;
    }
  }
}

@function getVal($Val) {
  $cur:map.get($themes, $curThemeName);
  $curVal: map.get($cur, $Val);
  @return $curVal;
}

